<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>By 裴鸿宇</title>
<style type="text/css">
body {
    margin:0px;
}
.top-area{
	margin-top:10px;
	width:990px;
	height:40px;
	border:1px solid #D3D3D3;
	background-color:#00FFFF;
}

a{
text-decoration: none;
}
a:hover{
text-decoration:none;
}

/*--------*/
.main-area{
	overflow:hidden;
	margin-top:10px;
	width:990px;
	height:auto;
	border:1px solid #D3D3D3;
}
.main_{
	overflow:hidden;
	margin-top:10px;
	margin-bottom:10px;
	width:800px;
	height:auto;
	border:1px solid #D3D3D3;
}
.personal{
	overflow:hidden;
	float:left;
	width:120px;
	height:auto;
	border-width:0px 1px 0px 0px;
	border-style:solid;
	border-color:#D3D3D3;
}
.master_face{
	width:90px;
	height:90px;
	border:2px solid #99CCCC;
}
.infor{
	overflow:hidden;
	margin-top:10px;
	margin-left:5px;
	width:120px;
	height:13px;
	text-align:left;
	font-size:13px;
}
.button{
	background-color:#4EEE94;
	cursor:pointer;
}
.button_{
	background-color:#4EEE94;
	cursor:pointer;
	font-size:10px;
}
.main_content{
	float:left;
	margin-left:20px;
	margin-top:3px;
	width:650px;
	height:260px;
}
.tiezi_content{
	overflow:auto;
	width:600px;
	height:200px;
	text-align:left;
	font-size:13px;
	border:1px solid #D3D3D3;
}
.time{
	margin-top:3px;
	width:600px;
	text-align:right;
	font-size:14px;
	color:#FF9900;
}

.discuss{
	width:780px;
	text-align:left;
	border:1px solid #D3D3D3;
}
.discuss_face{
	width:50px;
	height:50px;
}
.discuss_content{
	margin-top:5px;
	margin-left:5px;
	font-size:14px;
	width:643px;
	height:50px;
	overflow:auto;
	border-width:0px 0px 1px 0px;
}
.diss{
	float:left;
	width:650px;
	margin-left:35px;
	margin-top:5px;
	overflow:hidden;
	height:auto;
}
.answer{
	margin-top:15px;
	margin-left:30px;
	overflow:auto;
	height:auto;
	font-size:13px;
	border:0px;
	display:none;
}
.answer_{
	margin-bottom:5px;
	width:580px;
	overflow:auto;
	height:auto;
	font-size:13px;
	border-width:0px 0px 1px 0px;
}
.answer_submit{
	width:750px;
	text-align:right;
}

.dis_edit{
	border:1px solid #D3D3D3;
}
.diss_{
	width:780px;
	text-align:right;
}
.txt_color{
	border-color:#6699FF;
}
.text{
	width:775px;
	height:150px;
}
.border_{
	overflow:visible;
	border:0px;
}
.dis_button{
	cursor:pointer;
	background-color:#00CCFF;
}
.answer_content{
	margin-left:95px;
	width:650px;
	height:100px;
	display:none;
}
.text_{
	float:left;
	margin-left:80px;
}
.text_submit{
	float:left;
	height:25px;
	margin-top:60px;
}
.font{
	text-align:left;
	margin-top:5px;
	font-size:20px;
	font-weight:bold;
	width:800px;
	color:#0099FF;
}
.dis_font{
	text-align:left;
	margin-top:5px;
	font-size:15px;
	font-weight:bold;
	width:800px;
	color:#FF6666;
}
/*--------*/
.last-area{
	width:620px;
	height:90px;
	margin-top:20px;
	border:1px solid #D3D3D3;
}
/*--------*/
.clear_{
	clear:both;
}
</style>
</head>
<body>
	<center>
		<div class="top-area"></div>
		
		<div class="main-area">
			<div class="main_">
				<div class="personal">
					<div style="margin-top:5px;"><img src="<%=request.getContextPath()%>/fileRedirect.action?toPage=stu/img/face/face.jpg" class="master_face"></div>
					<font size="2">文王</font>
					<br/>
					<br/>
					<div class="infor">帖子：345</div>
					<div class="infor">精华：23</div>
					<div class="infor">积分：3454</div>
					<div class="infor">在线小时：345</div>
					<div class="infor" style="height:auto;"><input type="button" value="+&nbsp;好友" class="button"></div>
				</div>
				<div class="main_content">
					java学习要注意什么？<br/><br/>
					<div class="tiezi_content">
						申达股份发生的分公司的规范的俄日为，奶粉二楼空调家乐购的发生率改扩建刘德华，烦得很开个会梵蒂冈很快的国际化的发给可很快发货，方工行卡法规和更好地给父母和的干活的？
						的法轮功加快递费的风格昆明的风格的法规的
					</div>
					<div class="time">发表于：2013-9-26</div>
				</div>
			</div>
			
			<br/><br/>
			<div class="main_">
				<div class="font">游客评论>></div>
				<br/>
				<div class="main_ discuss">
					<div style="float:left;">
						<img src="<%=request.getContextPath()%>/fileRedirect.action?toPage=stu/img/face/face1.jpg" class="discuss_face">
						<br/>
						<font size="1">小李</font>
						<br/>
						<input type="button" value="+&nbsp;好友" class="button_">
					</div>
					<div class="tiezi_content diss">
						<div class="tiezi_content discuss_content">写得不错!</div>
						<div id="ac_1" class="tiezi_content answer" style="sidplay:block;">
							<!--留于用Ajax实现
							<div class="tiezi_content answer_"></div>
							<div class="tiezi_content answer_"></div>
							  -->
						</div>
					</div>
					<div class="clear_"></div>
					<div class="answer_submit"><input type="button" value="回复" style="cursor:pointer;" onclick="answer(1);"></div>
					<div id="answer_content_1" class="answer_content">
						<div class="text_"><textarea cols="50" rows="5" id="answer_1" class="txt_color"></textarea></div>
						<div id="text_1" class="text_submit">
							<input type="submit" value="提交" onclick="submit(1);">
							<input type="button" value="取消" onclick="disslove(1);">
						</div>
					</div>
				</div>
				
				<div id="another_discuss" class="main_ discuss" style="display:none;">
					<div style="float:left;">
						<img src="<%=request.getContextPath()%>/fileRedirect.action?toPage=stu/img/face/face3.jpg" class="discuss_face">
						<br/>
						<font size="1">匿名</font>
						<br/>
						<input type="button" value="+&nbsp;好友" class="button_">
					</div>
					<div class="tiezi_content diss">
						<div id="discuss_content" class="tiezi_content discuss_content"></div>
						<div id="ac_2" class="tiezi_content answer">
							<!--留于用Ajax实现
							<div class="tiezi_content answer_"></div>
							<div class="tiezi_content answer_"></div>
							  -->
						</div>
					</div>
					<div class="clear_"></div>
					<div class="answer_submit"><input type="button" value="回复" style="cursor:pointer;" onclick="answer(2);"></div>
					<div id="answer_content_2" class="answer_content">
						<div class="text_"><textarea cols="50" rows="5" id="answer_2" class="txt_color"></textarea></div>
						<div id="text_2" class="text_submit">
							<input type="submit" value="提交" onclick="submit(2);">
							<input type="button" value="取消" onclick="disslove(2);">
						</div>
					</div>
				</div>
				
				<br/>
				<br/>
				<br/>
				<br/>
				<div class="dis_font">发起评论：</div>
				<div class="main_ discuss border_">
					<textarea id="discuss_text" class="text"></textarea>
					<br/>
					<div class="diss_"><input type="submit" value="发表评论" class="dis_button" onclick="submit_discuss();"></div>
				</div>
			</div>
		</div>
		<div class="last-area"></div>
	</center>
</body>
</html>

<script type="text/javascript">

function answer(n){
	document.getElementById("answer_content_"+n).style.display="block";
}
function submit(n){
	document.getElementById("ac_"+n).style.display="block";
	document.getElementById("ac_"+n).innerHTML="回复："+document.getElementById("answer_"+n).value;
	document.getElementById("answer_content_"+n).style.display="none";
	alert("提交成功!");	
}
function disslove(n){
	document.getElementById("answer_content_"+n).style.display="none";
}
function submit_discuss(){
	document.getElementById("another_discuss").style.display="block";
	document.getElementById("discuss_content").innerHTML=document.getElementById("discuss_text").value;
	
}

</script>